<template>
	<view class="tab-bar">
		<view class="content">
			<view class="one-tab" v-for="(item, index) in list" :key="index" @click="selectTabBar(item.pagePath)">
				<view class="tab-img">
					<image v-if="currentRoute === item.pagePath" class="img" :src="item.selectedIconPath"></image>
					<image v-else class="img" :src="item.iconPath"></image>
				</view>
				<view v-if="currentRoute === item.pagePath" class="tit tit-selected">{{ item.text }}</view>
				<view v-else="currentRoute === item.pagePath" class="tit">{{ item.text }}</view>
			</view>
			<view v-if="messageNum > 0" class="message-num">{{messageNum}}</view>
			<view v-if="showManage && role == 2 && currentRoute.indexOf('home-manage/index') != -1 " class="add"
				@click="toEdit">+</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				list: [],
				currentRoute: '',
				role: 1,
				showManage: false,
				messageNum: 0
			};
		},
		mounted() {
			let userInfo = this.$common.get('userInfo');
			if (!this.$common.isEmpty(userInfo.positionId) && '123'.indexOf(userInfo.positionId) != -1) {
				this.showManage = true
			}
			let role = this.$common.get('role');
			this.role = role
			if (role == 1) {
				this.list = this.$helper.default.member;
			} else if (role == 2) {
				this.list = this.$helper.default.notMember;
			} else {
				uni.showToast({
					title: '请前去登录',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					//去我的页面登录
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}, 2000);
			}
			let pages = getCurrentPages();
			this.currentRoute = pages[pages.length - 1].$page.fullPath;
			if('/pages/home/index' == this.currentRoute){
				this.$api.messageNum({
					vipId: userInfo.vipId
				}).then(res => {
					this.messageNum = res.data;
				});
			}
		},
		methods: {
			selectTabBar(path) {
				uni.switchTab({
					url: path
				});
				//this.$emit('onTabBar', path)
			},
			toEdit() {
				//4项目经理添加订单
				uni.navigateTo({
					url: '/pages/home-manage/edit/index?orderType=4'
				});
			},
		}
	};
</script>

<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		z-index: 9990;
		box-shadow: 0px -1rpx 21rpx 0rpx rgba(238, 238, 238, 0.75);
		height: 120rpx;

		.message-num {
			z-index: 9999;
			position: relative;
			left: -168rpx;
			top: -2rpx;
			width: 22rpx;
			height: 22rpx;
			background: #ff3200;
			border-radius: 50%;
			font-size: 16rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 22rpx;
			text-align: center;
		}

		.add {
			width: 110rpx;
			height: 110rpx;
			background: #3367ff;
			opacity: 0.9;
			border-radius: 50%;
			color: #ffffff;
			font-weight: bold;
			text-align: center;
			line-height: 108rpx;
			font-size: 60rpx;
			position: absolute;
			z-index: 9991;
			left: 320rpx;
			bottom: 70rpx;
		}

		.content {
			display: flex;
			padding-top: 10rpx;

			.one-tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;

				.tab-img {
					width: 44rpx;
					height: 44rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.tit-selected {
					color: #4f73fe !important;
				}

				.tit {
					font-size: 22rpx;
					font-weight: 400;
					color: #bfbfbf;
					transform: scale(0.7);
				}
			}
		}
	}
</style>
